<template>
<SafeAreaInsets :color="backgroundColor" :noSafe="noSafe" />
<view class="w-full px-[25rpx] h-[102rpx] flex justify-between items-center pos-fixed left-0 z-10"
  :style="[{ backgroundColor: props.backgroundColor, top: safeAreaInsets?.top + 'px' }, props.style]">
  <view class="w-170rpx flex items-center" :class="{ w_50: noTitle }" :style="[props.prefixStyle]">
    <slot name="backBtn">
      <wd-icon name="chevron-left" size="50rpx" @click="onBackClick" :color="color"></wd-icon>
    </slot>
    <slot name="prefix"></slot>
  </view>
  <slot name="title">
    <view class="color-#181818 font-600 text-[30rpx]" :class="{ 'flex-1': noTitle }" :style="{ color: color }">
      {{ title }}
    </view>
  </slot>
  <view class="w-170rpx flex justify-end" :class="{ 'flex-1': noTitle }" v-if="!noEnd">
    <slot name="suffix" />
  </view>
</view>
<view class="h-[102rpx]" v-if="!noSafe"></view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'
import SafeAreaInsets from '@/components/safeAreaInsets/safeAreaInsets.vue'

const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  backgroundColor: {
    type: String,
    default: '#ffffff',
  },
  color: {
    type: String,
    default: '#181818',
  },
  noTitle: {
    type: Boolean,
    default: false,
  },
  noSafe: {
    type: Boolean,
    default: false,
  },
  style: {
    type: Object,
    default: () => ({}),
  },
  noEnd: {
    type: Boolean,
    default: false,
  },
  prefixStyle: {
    type: Object,
    default: () => ({}),
  }
})

const emit = defineEmits()

const onBackClick = () => {
  uni.navigateBack()
}

const safeAreaInsets = ref({
  top: 0,
  bottom: 0,
  left: 0,
  right: 0,
})

onMounted(() => {
  const { safeAreaInsets: systemSafeAreaInsets } = uni.getSystemInfoSync()
  safeAreaInsets.value = systemSafeAreaInsets
})


</script>

<style lang="scss" scoped>
.w_50 {
  width: auto;
}

.shadown {
  box-shadow: 0 1px 10px 0 rgba(221, 221, 221, 0.25);
}
</style>
